<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .hidden {
    display: none;
  }
</style>
<body>
<div class="sidebar">
  <ul>
    <li><a href="#" id="page1">Page 1</a></li>
    <li><a href="#" id="page2">Page 2</a></li>
    <li><a href="#" id="page3">Page 3</a></li>
  </ul>
</div>

<div class="page-content">
  <div id="page1-content" class="hidden">
    <h1>Page 1 Content</h1>
    <p>This is the content for Page 1.</p>
  </div>

  <div id="page2-content" class="hidden">
    <h1>Page 2 Content</h1>
    <p>This is the content for Page 2.</p>
  </div>

  <div id="page3-content" class="hidden">
    <h1>Page 3 Content</h1>
    <p>This is the content for Page 3.</p>
  </div>
</div>
</body>
<script>
  // 获取页面内容元素
  var page1content = document.getElementById("page1-content");
  var page2content = document.getElementById("page2-content");
  var page3content = document.getElementById("page3-content");

  // 获取侧边栏元素
  var page1link = document.getElementById("page1");
  var page2link = document.getElementById("page2");
  var page3link = document.getElementById("page3");

  // 侧面菜单点击事件处理程序
  page1link.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止链接默认行为
    page1content.classList.remove("hidden"); // 显示目标内容元素
    page2content.classList.add("hidden"); // 隐藏其它内容元素
    page3content.classList.add("hidden");
  });

  page2link.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止链接默认行为
    page2content.classList.remove("hidden"); // 显示目标内容元素
    page1content.classList.add("hidden"); // 隐藏其它内容元素
    page3content.classList.add("hidden");
  });

  page3link.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止链接默认行为
    page3content.classList.remove("hidden"); // 显示目标内容元素
    page1content.classList.add("hidden"); // 隐藏其它内容元素
    page2content.classList.add("hidden");
  });
</script>
</html>